<template>
  <DetailsBox :isPup="isPup" v-bind="$attrs" @backBtn="backBtn" :title="`${title}${typeName(type)}`" :isFull="isFull"
    :style="style" :json="form">
    <template #btn v-if="btns?.length > 0 && isBtnShow">
      <div class="list-r-8">
        <template v-for="item in btns">
          <el-button :type="item.type" @click="saveBtn(item)" v-permission="item.permission" v-if="!item.hidden">{{
            item.title
          }}</el-button>
        </template>
      </div>
    </template>
    <template #info v-if="formInfo && formInfo.length > 0 && form">
      <template v-for="(item, index) in formInfo">
        <el-divider direction="vertical" v-if="index !== 0" />
        <span>{{ `${item.label}：${form[item.value] || '--'}${item.unit || ''}` }}</span>
      </template>
    </template>
    <template #headR v-if="$slots.headR">
      <slot name="headR" :form="form" />
    </template>
    <template #left v-if="$slots.left">
      <slot name="left" :form="form" />
    </template>
    <template #default>
      <el-form :model="form" label-width="auto" ref="ruleFormRef">
        <el-form-item label=" " class="fullNone"></el-form-item>
        <slot :form="form" v-if="isFull" />
        <div class="list-b-12" v-else>
          <slot :form="form" v-if="$slots.default" />
          <template v-else-if="formSet && form">
            <template v-for="item in formSet">
              <ElItemBox :data="form" :item="item" />
            </template>
          </template>
        </div>
      </el-form>
    </template>
  </DetailsBox>
  <LodingBox :loading="loading" :loadingMsg="loadingMsg" />
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    title?: string;
    style?: any;
    form?: any;
    formInfo?: any;//单据描述
    btns?: any;
    type?: string;
    formSet?: any;
    loading?: boolean;
    isFotmDisabled?: Function;
    loadingMsg?: string;
    json?: any;
    isFull?: boolean;
    isPup?: boolean;
    isBtnShow?: boolean;
  }>(),
  {
    form: {},
    btns: [],
    formInfo: [],
    isBtnShow: true,
  },
);

const typeName = (type?: number | string) => {
  let _text = type
  switch (type) {
    case '1':
      _text = '新建'
      break;
    case '2':
      _text = '编辑'
      break;
    case '3':
      _text = '查看'
      break;
    case '4':
      _text = '审批'
      break;
    case '5':
      _text = '复制'
      break;
  }
  return _text ? ` - ${_text}` : ''
}

const ruleFormRef = ref(null);
const saveBtn = async (item: any, formEl: any = ruleFormRef.value) => {
  if (props.form && item.title !== '重置' && !item.isNotRule) {
    if (!formEl) return;
    await formEl.validate(async (valid: any) => {
      // console.log(formEl.validate());
      if (valid) {
        _sun();
      }
    });
  } else {
    _sun();
  }
  function _sun() {
    if (item.click && typeof item.click === 'function') {
      item.click(props.form, () => {
        resetForm(formEl)
      });
    }
  }
};
//重置
const resetForm = (formEl: any) => {
  if (!formEl) return
  formEl.resetFields()
}
const backBtn = () => {
  proxy.$messageBox('是否退出当前页面，请确认！', () => {
    window.close();
  });
};


onMounted(() => {
});
</script>
